<template>
    <div class="search-box">
        <!-- 地点 -->
        <div class="location">
            <div class="city" @click="cityClick">{{ currentCity.cityName }}</div>
            <div class="position" @click="positionClick">
                <span class="text">我的位置</span>
                <img src="@/assets/img/home/icon_location.png" alt="">
            </div>
        </div>
        <!-- 选择日期范围 -->
        <div class="section date-range bottom-gray-line" @click="showCalendar = true">
            <div class="start">
                <div class="date">
                    <span class="tip">入住</span>
                    <span class="time">{{ startDateStr }}</span>
                </div>
                <div class="stay">共{{ stayCount }}晚</div>
            </div>
            <div class="end">
                <div class="date">
                    <span class="tip">离店</span>
                    <span class="time">{{ endDateStr }}</span>
                </div>
            </div>
        </div>
        <van-calendar v-model:show="showCalendar" type="range" color="#ff9854" @confirm="onConfirm"
            :formatter="formatter" :round="false" />
        <!-- 价格/人数 -->
        <div class="section price-counter bottom-gray-line">
            <div class="start" @click="showPriceClickHandle">价格不限</div>
            <div class="end">人数不限</div>
        </div>
        <!-- 关键字 -->
        <div class="section keyword bottom-gray-line" @click="toSearchClick">关键字/位置/民宿名</div>
        <!-- 热门建议 -->
        <div class="section hot-suggests">
            <template v-for="(item, index) in hotSuggests" :key="index">
                <div class="item" :style="{ color: item.tagText.color, background: item.tagText.background.color }">
                    {{ item.tagText.text }}
                </div>
            </template>
        </div>
        <!-- 搜索按钮 -->
        <div class="section search-btn">
            <div class="btn" @click="searchBtnClick">开始搜索</div>
        </div>
    </div>

    <van-action-sheet v-model:show="showSheet" title="价格">
        <div class="showSheetContent">内容</div>
    </van-action-sheet>
</template>


<script setup>
import useCityStore from '@/stores/modules/city';
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { formatMonthDay, getDiffDays } from "@/utils/format_date";
import useMainStore from '@/stores/modules/main';

const router = useRouter()

// 当前城市
const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)

// 选择城市
const cityClick = () => {
    router.push("/city")
}

// 点击获取位置
const positionClick = () => {
    navigator.geolocation.getCurrentPosition(res => {
        console.log("获取位置成功：", res);
    }, err => {
        console.log("获取位置失败：", err);
    }, {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    })
}

// 日期范围的处理
// const nowDate = new Date()
// const newDate = new Date().setDate(nowDate.getDate() + 1)
const mainStore = useMainStore()
const { startDate, endDate } = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value))
const endDateStr = computed(() => formatMonthDay(endDate.value))
const stayCount = ref(getDiffDays(startDate.value, endDate.value))
// 选择日期
const showCalendar = ref(false)
const formatter = (day) => {
    if (day.type === 'start') {
        day.bottomInfo = '入住';
    } else if (day.type === 'end') {
        day.bottomInfo = '离店';
    }
    return day;
};
// 点击确定
const onConfirm = (value) => {
    // 设置日期
    const selectStartDate = value[0]
    const selectEndDate = value[1]
    mainStore.startDate = selectStartDate
    mainStore.endDate = selectEndDate
    stayCount.value = getDiffDays(selectStartDate, selectEndDate)
    // 隐藏日历
    showCalendar.value = false
}

// 获取热门建议
const homeStore = useHomeStore()
const { hotSuggests } = storeToRefs(homeStore)

// 搜索按钮
const searchBtnClick = () => {
    router.push({
        path: "/search",
        query: {
            startDate: startDate.value,
            endDate: endDate.value,
            currentCity: currentCity.value.cityName
        }
    })
}

// 价格
const showSheet = ref(false)
const showPriceClickHandle = () => {
    showSheet.value = true
}

const toSearchClick = () => {
    router.push({
        path: "/search",
        query: {
            startDate: startDate.value,
            endDate: endDate.value,
            currentCity: currentCity.value.cityName
        }
    })
}

</script>


<style lang="less" scoped>
:global(.van-action-sheet__header) {
    text-align: left;
    padding: 15px;
}

.search-box {
    --van-calendar-popup-height: 100%;
}

.location {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;

    .city {
        flex: 1;
        color: #333;
        font-size: 15px;
    }

    .position {
        width: 74px;
        display: flex;
        align-items: center;

        .text {
            position: relative;
            margin-top: 2px;
            font-size: 12px;
            color: #666;
        }

        img {
            margin-left: 5px;
            height: 18px;
            width: 18px;
        }
    }
}

.section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    padding: 0 20px;
    color: #999;
    height: 44px;

    .start {
        flex: 1;
        display: flex;
        height: 44px;
        align-items: center;
    }

    .end {
        // flex: 1;
        min-width: 30%;
        padding-left: 20px;
    }

    .date {
        display: flex;
        flex-direction: column;

        .tip {
            font-size: 12px;
            color: #999;
        }

        .time {
            font-size: 15px;
            color: #333;
            margin-top: 3px;
            font-weight: 500;
        }
    }


}

.date-range {
    height: 44px;

    .stay {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #666;
    }
}

.price-counter {
    .start {
        border-right: 1px solid #f8f9f9;
    }
}

.hot-suggests {
    margin: 10px 0;
    height: auto;

    .item {
        padding: 4px 8px;
        border-radius: 14px;
        margin: 4px;
        font-size: 12px;
        line-height: 1;
    }
}

.search-btn {
    .btn {
        width: 342px;
        height: 38px;
        max-height: 50px;
        font-weight: 500;
        font-size: 18px;
        line-height: 38px;
        text-align: center;
        border-radius: 20px;
        color: #fff;
        background-image: var(--theme-linear-gradient);
    }
}

.showSheetContent {
    padding: 20px;
    font-size: 16px;
    color: #333;
    text-align: center;
}
</style>